<template>
    <div style="padding: 40px;" id="item">
        <h2 style="color: #000;margin-bottom: 20px;">各省份疫情数据展示</h2>
        <div style="display: flex;align-items: center;justify-content: flex-end;margin-bottom: 20px;">
            <div style="display: flex;align-items: center;">
                <input v-model="name" placeholder="请输入关键字" class="inp" />
                <el-button type="primary" @click="dataList()" style="margin-left: 20px;">搜索</el-button>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe
            :header-cell-style="{ background: '#66b1ff', color: '#000' }">
            <el-table-column prop="province" label="省份名称" align="center" />
            <el-table-column prop="city" label="城市名称" align="center" />
            <el-table-column prop="confirm" label="累计确诊(人)" align="center" />
            <el-table-column prop="confirmAdd" label="较昨日(人)" align="center" />
            <el-table-column prop="dead" label="累计死亡(人)" align="center" />
            <el-table-column prop="heal" label="累计治愈(人)" align="center" />
            <el-table-column prop="overseas" label="境外输入(人)" align="center" />
        </el-table>
        <div style="margin-top: 20px;">
            <el-pagination background layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getDataList } from '@/api/echarts'
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            total: 0,
            dialogFormVisible: false,
            pageSize: 20,
            form: {},
            params: {
                key: "",
                createDate: ""
            },
            name: ""
        }
    },
    mounted() {
        this.dataList()
    },
    methods: {
        async dataList() {
            getDataList({ pageNum: this.currentPage, pageSize: this.pageSize, province: this.name }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.dataList()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.dataList()
        }
    }
}
</script>
<style>
.inp {
    width: 222px;
    height: 30px;
    border: 1px solid #ebeef5;
}
</style>